<template>
	<div class="login-container">
		<div class="bgPic"><img src="../../../public/static/img/login-img/bg.png" alt="" /></div>
		<div class="logo_bg"><img src="../../../public/static/img/login-img/logo.png" alt="" /></div>
		<div class="draw"><img src="../../../public/static/img/login-img/draw.png" alt="" /></div>
		<div class="welcomeTxt">
			<h2>Hi,</h2>
			<h2>欢迎登录后台管理系统</h2>
		</div>
		<div class="login-content">
			<!-- LOGO -->
			<!-- <div class="logo">
        <img src="/static/img/logo-sm.png" alt="">
        <h1 class="title">后台管理系统</h1>
      </div> -->

			<!-- 表单 -->
			<div>
				<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="demo-ruleForm login-form" label-position="left">
					<el-form-item prop="username">
						<!-- <span class="svg-container svg-container_login"><svg-icon icon-class="user" /></span> -->
						<el-input v-model="loginForm.username" name="username" type="text" placeholder="账号/用户名" />
					</el-form-item>
					<el-form-item prop="password">
						<!-- <span class="svg-container svg-container_login"><svg-icon icon-class="password" /></span> -->
						<el-input v-model="loginForm.password" :type="pwdType" name="password" placeholder="请输入密码" @keyup.enter.native="handleLogin">
							<i slot="suffix" class="el-input__icon el-icon-view" @click="showPwd" />
						</el-input>
					</el-form-item>
					<el-form-item><el-button :loading="loading" type="primary" class="login_btn" @click.native.prevent="handleLogin">登录</el-button></el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
// ====================引入模块====================
// 正则匹配
import { validateLoginName } from '@/utils/validate.js';
import { setToken } from '@/utils/auth';
export default {
	name: 'Login',
	data() {
		// ====================定义正则方法====================
		const validateUsername = (rule, value = '', callback) => {
			if (value === '') {
				callback(new Error('请输入用户名'));
			} else if (!validateLoginName(value)) {
				callback(new Error('输入不符规则'));
			} else {
				callback();
			}
		};

		const validatePass = (rule, value = '', callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				callback();
			}
		};

		return {
			// 表单规则
			loginRules: {
				username: [{ validator: validateUsername, trigger: 'blur' }],
				password: [{ validator: validatePass, trigger: 'blur' }]
			},
			loginForm: {
				username: '',
				password: ''
			},
			loading: false,
			pwdType: 'password',
			redirect: undefined
		};
	},
	watch: {
		$route: {
			handler: function(route) {
				this.redirect = route.query && route.query.redirect;
			},
			immediate: true
		}
	},
	created() {
		this.getParamResults();
	},
	mounted() {},
	methods: {
		// ====================登录====================
		handleLogin() {
			this.$refs.loginForm.validate(valid => {
				if (valid) {
					this.loading = true;
					this.$store
						.dispatch('Login', this.loginForm)
						.then(() => {
							this.loading = false;
							this.$router.push({ path: this.redirect || '/' });
						})
						.catch(() => {
							this.loading = false;
						});
				} else {
					return false;
				}
			});
		},
		// ====================显示隐藏密码====================
		showPwd() {
			if (this.pwdType === 'password') {
				this.pwdType = '';
			} else {
				this.pwdType = 'password';
			}
		},

		/* 截取url参数 */
		getParamQueryString(url, name) {
			const subStr = name + '=';
			if (url.indexOf(subStr) !== -1) {
				const arr = url.split(subStr);
				const sub1 = arr[1];
				if (sub1.indexOf('&') !== -1) {
					const arr2 = sub1.split('&');
					const sub2 = arr2[0];
					return sub2;
				} else {
					return sub1;
				}
			}
			return '';
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
$dark_gray: #b4b4b4;
$light_gray: #fff;
.login-container {
	position: fixed;
	height: 100%;
	width: 100%;
	background-color: white;
	.bgPic {
		width: 100%;
		height: 100%;
		position: fixed;
		// z-index: 1;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.logo_bg {
		width: 5%;
		position: fixed;
		top: 20%;
		left: 17%;
		z-index: 1;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.draw {
		width: 43%;
		position: fixed;
		bottom: 20%;
		left: 0;
		z-index: 1;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.welcomeTxt {
		position: fixed;
		top: 20vh;
		left: 23.5%;
		z-index: 1;

		h2 {
			font-weight: 500;
			font-size: 2vw;
			margin: 0;
			margin-bottom: 1vh;
		}
	}
	.login-content {
		position: absolute;
		width: 27%;
		// height: 48%;
		max-width: 100%;
		top: 23%;
		right: 18%;
		box-shadow: 0 0 20px #fcebd4;
		background-color: white;
		border-radius: 36px;
	}
	.logo {
		height: 100px;
		margin: 0px auto 25px auto;
		line-height: 100px;
		text-align: center;
		img {
			width: 100px;
			height: 100px;
			vertical-align: top;
		}
		.title {
			display: inline-block;
			margin: 0;
			font-size: 40px;
			color: #fefefe;
		}
	}

	.login-form {
		width: 100%;
		height: 100%;
		padding: 10% 12%;
		border-radius: 30px;
		background: #fff;
		box-shadow: 0 0 20px #fcebd4;
		::-webkit-input-placeholder {
			font-size: 0.8vw;
		}
		.el-input__icon {
			line-height: 6.5vh;
		}
	}
	.svg-container {
		position: absolute;
		z-index: 2;
		height: 20px;
		left: 10px;
		top: 10px;
		text-align: center;
		color: #909399;
		&_login {
			font-size: 20px;
		}
	}
}
</style>

<style rel="stylesheet/scss" lang="scss">
/* reset element-ui css */
.login-container {
	.el-input {
		display: inline-block;
		height: 6vh;
		border: none;
		.el-input__inner {
			height: 100%;
			// padding-left: 40px;
			line-height: 56px;
			font-size: 18px;
		}
	}
	.el-form-item {
		margin-bottom: 15%;
		background: #fff;
		border-radius: 5px;
		color: #b4b4b4;

		.el-input__inner {
			border: none;
			border-bottom: 1px solid #e0e0e0;
			padding: 0;
			border-radius: 0;
		}
		.el-input__inner:focus {
			border-bottom: 1px solid #ffb72f;
		}
		.el-input__icon {
			line-height: 56px;
		}
	}
	.el-form-item:nth-last-child(1) {
		margin-bottom: 0;
	}
	.login_btn {
		width: 100%;
		padding: 1.8vh 0;
		font-size: 1vw;
		background-color: #ffb72f;
		border-radius: 10px;
		border: none;
		margin-top: 3%;
	}
	.el-form-item__error {
		padding-top: 2%;
		font-size: 0.5vw;
	}
}
</style>
